import React, { useState, useEffect } from 'react'
import { Table, Tag, Button, Modal, message, Popover, Switch } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import axios from 'axios'

const { confirm } = Modal;

export default function RightList() {
  // 初始化数据数组
  const [dataSource, setdataSource] = useState([])
  // 获取数据
  useEffect(() => {
    axios.get('/rights?_embed=children').then(res => {
      // console.log(res.data);
      const list = res.data
      list.forEach(item => {
        if (item.children?.length <= 0) {
          item.children = ''
        }
      })
      setdataSource(list)
    })
  }, [])
  
  // table表格头部定义
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      key: 'key',
      render: (key) => {
        return <Tag color="volcano">{key}</Tag>
      }
    },
    {
      title: '操作',
      key: 'pagepermisson',
      render: (item) => {
        return <div>
          <Button type="primary" onClick={()=>removeConfim(item)} danger shape="circle" icon={<DeleteOutlined />} />
          <Popover content={<div style={{ textAlign: 'center' }}><Switch onChange={()=>switchChange(item)} checked={item.pagepermisson}></Switch></div>} title="修改" trigger={item.pagepermisson===undefined?'':'click'}>
            <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermisson===undefined} />
          </Popover>
        </div>
      }
    },
  ];
  
  // 删除事件二次确认
  const removeConfim = item => {
    confirm({
      title: '您确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      cancelText: '取消',
      onOk() {
        removeMethed(item)
      },
      onCancel() {},
    });
  }
  // 删除的函数
  const removeMethed = item => {
    // console.log('33', item);
    if (item.grade === 1) {
      setdataSource(dataSource.filter(data => data.id !== item.id))
      axios.delete(`/rights/${item.id}`).then(res => {
        if (res.status === 200) {
          message.success('删除成功');
        }
      })
    } else {
      const list = dataSource.filter(data => data.id === item.rightId)
      list[0].children = list[0].children.filter(data => data.id !== item.id)
      setdataSource([...dataSource])
      axios.delete(`/children/${item.id}`).then(res => {
        if (res.status === 200) {
          message.success('删除成功');
        }
      })
      
    }
    
  }
  // 修改状态
  const switchChange = item => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    setdataSource([...dataSource])
    console.log('item', dataSource);
    if (item.grade === 1) {
      axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    } else {
      axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson
      })
    }
  }
  
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize: 10
      }} />
    </div>
  )
}
